<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名称">
                <br> <br>
                <el-input v-model="formInline.name" placeholder @keyup.enter.native="search" style="margin-left:-40px;width:200px"></el-input>
            </el-form-item>
            <el-form-item label="编码">
                <br> <br>
                <el-input v-model="formInline.code" placeholder clearable @keyup.enter.native="search" style="margin-left:-40px;width:200px"></el-input>
            </el-form-item>
            <el-form-item style="margin-left:950px;text-align:right">
                <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
            <!-- </el-form-item>
            <el-form-item> -->
                <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
            <!-- </el-form-item>
            <el-form-item> -->
                <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增参数</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            v-loading="loading"
            border
           
            style="width: 100%"
            @selection-change="selectionChangeHandle"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        >
            <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
            <el-table-column prop="name" label="参数名称" header-align="center"></el-table-column>
            <el-table-column prop="code" label="参数编码" header-align="center"></el-table-column>
            <el-table-column prop="value" label="参数值" header-align="center"></el-table-column>
            <el-table-column prop="createUser" label="绑定值" header-align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">{{scope.row.status===0?'停用':'启用'}}</template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="350"
                align="center"
                header-align="center"
                fixed="right"
            >
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="mini">编辑</el-button>
                    <el-button
                        type="text"
                        v-if="scope.row.status == 1"
                        @click="updateStatus(scope.row.uuid,0)"
                    >停用</el-button>
                    <el-button
                        type="text"
                        v-if="scope.row.status == 0"
                        @click="updateStatus(scope.row.uuid,1)"
                    >启用</el-button>
                    <el-button @click="editset(scope.row)" type="text" size="mini">参数值</el-button>
                    <el-button @click="addparamValue(scope.row.uuid)" type="text" size="mini">添加参数值</el-button>
                    <el-button @click="handleClick(scope.row)" type="text" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-top:10px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>

        <el-dialog :title="!ruleForm.uuid ? '新增' : '修改'" :visible.sync="dialogVisible" width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="参数名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>

                <el-form-item label="参数值" prop="code">
                    <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
                <el-form-item
                    label="参数值"
                    prop="ruleForm.value"
                    style="width:300px"
                    v-if="ruleForm.uuid != ''"
                >
                    <el-select v-model="ruleForm.value">
                        <el-option
                            v-for="send in paramData"
                            :key="send.code"
                            :value="send.code"
                            :label="send.name"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="状态" prop="status">
          <el-select v-model="ruleForm.status">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
                </el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="confirmEdit()" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="dialogVisibleone" width="30%">
            <span>确认删除？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleone = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="sure()" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisibleorg" width="37%" style="height:1500px">
            <div>
                <el-tree
                    :data="paramData"
                    ref="tree"
                    show-checkbox
                    node-key="id"
                    :props="defaultProps"
                    @check-change="handleCheckChange"
                    check-strictly
                ></el-tree>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleorg = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="onSubmit()" size="mini">确 定</el-button>
            </span>
        </el-dialog>

        <!--参数配置详细弹窗-->
        <el-dialog title="参数配置详细" :visible.sync="dialogparamDetailVisible" width="80%">
            <el-table
                :data="paramData"
                stripe
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
                <el-table-column
                    property="uuid"
                    label="编号"
                    sortable
                    width
                    align="left"
                    v-if="false"
                ></el-table-column>
                <el-table-column property="name" label="名称" sortable width align="left"></el-table-column>
                <el-table-column property="code" label="参数值" sortable width align="right"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">{{scope.row.status===0?'停用':'启用'}}</template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="350"
                    align="left"
                    header-align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button @click="editparamValue(scope.row)" type="text" size="mini">编辑</el-button>
                        <el-button @click="deleteparamValue(scope.row)" type="text" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog
            :title="!valueForm.uuid ? '新增' : '修改'"
            :visible.sync="dialogvalueVisible"
            width="30%"
        >
            <el-form :model="valueForm" :rules="rules" ref="valueForm" label-width="80px">
                <el-form-item label="参数名称" prop="name">
                    <el-input v-model="valueForm.name"></el-input>
                </el-form-item>

                <el-form-item label="参数值" prop="code">
                    <el-input v-model="valueForm.code"></el-input>
                </el-form-item>
                <el-form-item label="父级Id" prop="paramId" style="display:none">
                    <el-input v-model="valueForm.paramId"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="valueForm.status">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogvalueVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="confirmEdittwo()" size="mini">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
  systemparameterList,
  systemparametervalueList,
  usebutton,
  rolemanagetwo,
  addinfo,
  deleterole,
  deleteSystemParamValue,
  updateinfo,
  setlimit,
  addcount,
  changecount
} from "@/api/systemparameter";
import qs from "qs";
export default {
  data() {
    return {
      data: [],
      loading: true,
      dialogVisibleorg: false,
      dialogparamDetailVisible: false,
      dataListSelections: [],
      formInline: {
        region1: ""
      },
      data5: [],
      data3: [],
      data4: [],
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      defaultProps: {
        children: "children",
        label: "name"
      },
      btnarr: [],
      arrid: [],
      arroneone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: "",
      rolefenid: "",
      selected: {},
      ruleForm: {
        uuid: "",
        name: "",
        code: "",
        value: 1,
        status: "1"
      },
      valueForm: {
        uuid: "",
        paramId: "",
        name: "",
        code: "",
        status: "1"
      },
      checkedarr: [],
      roleid: "",
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      dialogvalueVisible: false,
      formInline: {
        name: "",
        code: ""
      },
      arrone: [],
      paramData: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入参数名称",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请选择参数编码",
            trigger: "blur"
          }
        ],
        state: [{ required: true, message: "请选择状态", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.rolemanageone();
  },
  methods: {
    kong() {
      this.formInline.name = "";
      this.formInline.code = "";
    },

    search() {
      let data = {
        roleName: this.formInline.name,
        roleType: this.formInline.code
      };
      rolemanagetwo(data).then(res => {
        this.tableData = res.records;
      });
    },

    handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      this.arrid = [];
      this.btnarr = [];
      res.forEach(item => {
        // arr.push(item.id);
        // console.log(item, "ll2tt");
        if (item.resourceLevel == null) {
          this.btnarr.push(item.id);
          console.log(this.btnarr, "ll2ee");
        } else {
          this.arrid.push(item.id);
          //   this.arrone = arr;
          console.log(this.arrid, "ll2");
        }
      });
    },

    handledelete(v) {
      this.roleid = v.roleId;

      //   this.dialogVisibleone = true;
      let data = {
        roleId: this.roleid
      };
      this.$confirm("确认删除吗？").then(_ => {
        deleterole(qs.stringify(data)).then(res => {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this.rolemanageone();
          this.dialogVisibleone = false;
        });
      });
    },

    handleChange(value) {
      console.log(value);
    },
    add() {
      this.ruleForm.uuid = "";
      this.ruleForm.name = "";
      this.ruleForm.code = "";
      this.ruleForm.value = "";
      this.ruleForm.status = "1";
      this.dialogVisible = !this.dialogVisible;
      this.editflag = true;
    },
    edit(v) {
      this.ruleForm.uuid = v.uuid;
      this.ruleForm.name = v.name;
      this.ruleForm.code = String(v.code);
      this.ruleForm.value = v.value;
      console.log(typeof v.code, "oioi");
      this.ruleForm.status = String(v.status);
      console.log(v, "pp");
      this.dialogVisible = !this.dialogVisible;
      this.editflag = false;

      let data = {
        paramId: v.uuid
      };
      systemparametervalueList(data).then(res => {
        this.paramData = res.records;
      });
    },
    /*参数配置*/
    editset(v) {
      let data = {
        paramId: v.uuid
      };
      systemparametervalueList(data).then(res => {
        (this.dialogparamDetailVisible = true), (this.paramData = res.records);
      });
    },
    confirmEdit(v) {
      console.log(v, "ff");
      if (this.ruleForm.name == "" || this.ruleForm.name == null) {
        this.$message.error("请输入名称");
        return;
      }
      if (this.ruleForm.code == "" || this.ruleForm.code == null) {
        this.$message.error("请输入编码");
        return;
      }
      if (this.ruleForm.status == "" || this.ruleForm.status == null) {
        this.$message.error("请选择状态");
        return;
      }
      if (this.editflag) {
        //   var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          name: this.ruleForm.name,
          code: this.ruleForm.code,
          value: this.ruleForm.value
        };
        addinfo(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this.rolemanageone();
        });
      } else {
        //var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          uuid: this.ruleForm.uuid,
          name: this.ruleForm.name,
          code: this.ruleForm.code,
          value: this.ruleForm.value,
          status: this.ruleForm.status
        };
        updateinfo(data).then(res => {
          this.dialogVisible = !this.dialogVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.rolemanageone();
        });
      }
    },
    editparamValue(v) {
      this.valueForm.uuid = v.uuid;
      this.valueForm.name = v.name;
      this.valueForm.code = String(v.code);
      this.valueForm.paramId = v.paramId;
      this.ruleForm.status = String(v.status);
      this.dialogvalueVisible = !this.dialogvalueVisible;
      this.editvalueflag = false;
    },
    confirmEdittwo(v) {
      if (this.valueForm.name == "" || this.valueForm.name == null) {
        this.$message.error("请输入名称");
        return;
      }
      if (this.valueForm.code == "" || this.valueForm.code == null) {
        this.$message.error("请输入编码");
        return;
      }
      if (this.valueForm.status == "" || this.valueForm.status == null) {
        this.$message.error("请选择状态");
        return;
      }
      if (this.editvalueflag) {
        //   var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          name: this.valueForm.name,
          code: this.valueForm.code,
          paramId: this.valueForm.paramId,
          status: this.valueForm.status
        };
        addcount(data).then(res => {
          this.dialogvalueVisible = !this.dialogvalueVisible;
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          let data = {
            paramId: this.valueForm.paramId
          };
          systemparametervalueList(data).then(res => {
            (this.dialogparamDetailVisible = true),
              (this.paramData = res.records);
          });
        });
      } else {
        //var u1 = "u1";
        var userId = localStorage.getItem("userId");
        let data = {
          uuid: this.valueForm.uuid,
          name: this.valueForm.name,
          code: this.valueForm.code,
          paramId: this.valueForm.paramId,
          status: this.valueForm.status
        };
        changecount(data).then(res => {
          this.dialogvalueVisible = !this.dialogvalueVisible;
          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success"
          });
          this.rolemanageone();
        });
      }
    },

    handleClick(v) {
      // if (v.status === 0) {
      //   var uuid = 1;
      // } else if (v.status === 1) {
      //   var uuid = 0;
      // }
      let data = { uuid: v.uuid };
      deleterole(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.rolemanageone();
      });
    },
    deleteparamValue(v) {
      let data = { uuid: v.uuid };
      deleteSystemParamValue(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        let data = {
          paramId: v.paramId
        };
        systemparametervalueList(data).then(res => {
          (this.loading = false), (this.paramData = res.records);
        });
      });
    },
    search() {
      this.listQuery.current = 1;
      this.rolemanageone();
    },
    rolemanageone() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          name: this.formInline.name,
          code: this.formInline.code
        }
      };
      systemparameterList(data).then(res => {
        ((this.loading = false), (this.total = res.total)),
          (this.tableData = res.records);
      });
    },

    setCheckedNodes(v) {
      console.log(v, "ppp");
    },
    onSubmit() {
      console.log(this.arrid, this.btnarr, "pfl");
      //   this.data5 = [];
      //   this.data5.push(this.rolefenid);

      let data = {
        roleId: this.roleId,
        // appId: this.formInline.code,
        key: {
          menuIds: this.arrid,
          btnIds: this.btnarr
        }
      };
      setlimit(data).then(res => {
        this.$message({
          showClose: true,
          message: "新增角色菜单关联关系成功",
          type: "success"
        });
        this.dialogVisibleorg = !this.dialogVisibleorg;
        this.dialogVisibletwo = false;
      });
    },

    getVendorId(v) {
      this.formInline.code = v;
      console.log(v, "lll");
      this._getshu();
    },
    _getshu() {
      var zTreeAsyncTest = "zTreeAsyncTest";
      let data = {
        roleId: "",
        // appId: this.formInline.code,
        otherParam: zTreeAsyncTest
      };
      getshu(data).then(res => {
        this.records = res.records;
        var arr = res.records;
        var father = [],
          children = [],
          sanmenu = [];
        arr.forEach(item => {
          if (item.resourceLevel == 1) {
            item.sub = [];
            father.push(item);
          } else if (item.resourceLevel == 2) {
            children.push(item);
          }
        });
        for (var i = 0; i < father.length; i++) {
          for (var j = 0; j < children.length; j++) {
            if (father[i].id == children[j].pid) {
              if (!father[i].sub.length) {
                father[i].sub.push(children[j]);
                sanmenu.push(father[i]);
              } else {
                father[i].sub.push(children[j]);
              }
            }
          }
        }
        this.data4 = sanmenu;
        console.log(this.sanmenu, "pppppq");
        sanmenu.map((item, i) => {
          console.log(item, "jjj");
        });
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.size = val;
      this.rolemanageone();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.current = val;
      this.rolemanageone();
    },

    showRow(row) {
      //赋值给radio
      this.radio = this.tableData.indexOf(row);
      this.selected = row;
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 添加参数
    addparamValue(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      let data = {
        paramId: ids[0]
      };
      this.valueForm.uuid = "";
      this.valueForm.name = "";
      this.valueForm.code = "";
      this.valueForm.status = "1";
      this.valueForm.paramId = data.paramId;
      this.dialogvalueVisible = !this.dialogvalueVisible;
      this.editvalueflag = true;
    },
    updateStatus(uuid, status) {
      let data = {
        uuid: uuid,
        status: status
      };
      updateinfo(data).then(res => {
        var msg = "";
        if (status == "1") {
          msg = "启用";
        } else if (status == "0") {
          msg = "停用";
        } else if (status == "2") {
          msg = "删除";
        }
        if (res.code == "1") {
          this.$message({
            showClose: true,
            message: msg + "成功",
            type: "success"
          });
          this.rolemanageone();
        } else {
          this.$message.error(msg + "失败");
        }
      });
    },

  }
};
</script>
<style  lang="less" scoped>
.demo-form-inline {
    border: 1px solid #ebeef5;
    padding: 20px 10px 0px 30px;
}
</style>
